<template>
  <div>
    <PageWrapper :dense="true" :contentFullHeight="true">
      <template #headerContent>
        <Row>
          <Col
            :span="24"
            :xs="24"
            :sm="24"
            :md="24"
            :lg="24"
            :xl="24"
            style="display: flex; justify-content: flex-end"
          >
            <Space>
              <InputSearch
                v-model:value="searchWrokFlow"
                :placeholder="t('routes.demo.workFlow.workFlowPage.searchFlowTemplate')"
                style="width: 200px"
                @search="GetAllFlow"
              />
              <a-button
                v-auth="['processManager:template:create']"
                type="primary"
                preIcon="ion:add-outline"
                @click="handleCreated"
              >
                {{ t('routes.demo.workFlow.workFlowPage.newFlowTemplate') }}
              </a-button>
            </Space>
          </Col>
        </Row>
        <Row style="margin-top: 10px">
          <Col :span="24" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <List
              item-layout="vertical"
              size="large"
              :data-source="flowList"
              :pagination="pagination"
              rowKey="id"
            >
              <template #renderItem="{ item }">
                <ListItem>
                  <template #actions>
                    <a>
                      <Popconfirm
                        :title="t('routes.demo.workFlow.workFlowPage.isDeleteFlowTemplate')"
                        :ok-text="t('common.yes')"
                        :cancel-text="t('common.no')"
                        @confirm="confirmWorkFlow(item)"
                      >
                        <Icon
                          icon="ic:outline-delete-outline"
                          v-auth="['processManager:template:delete']"
                        />{{ t('common.delete') }}
                      </Popconfirm>
                    </a>
                  </template>
                  <template #extra>
                    <Image
                      style="width: 200px; height: 100px"
                      :src="flowImage"
                      :preview-src-list="flowImage"
                    />
                  </template>
                  <ListItemMeta>
                    <template #title>
                      <a @click="handleEdit(item)">{{ item.id }}</a>
                    </template>
                    <template #description
                      >{{ t('routes.demo.workFlow.workFlowPage.createTime')
                      }}{{ proxy.$filters.filterTime(item.createTime) }}</template
                    >
                  </ListItemMeta>
                </ListItem>
              </template>
            </List></Col
          >
        </Row>
      </template>
    </PageWrapper>
    <!-- 添加属性弹窗 -->
    <createFlowTemplate @register="registerCreateFlowTemplateModal" />
  </div>
</template>
<script lang="ts" setup>
  import { ref, getCurrentInstance } from 'vue';
  import { PageWrapper } from '/@/components/Page';
  import { newFlowListApi, deleteFlowTemplate } from '/@/api/demo/flow';
  import {
    Row,
    Col,
    List,
    ListItem,
    ListItemMeta,
    Popconfirm,
    Image,
    InputSearch,
    Space,
  } from 'ant-design-vue';
  import { Icon } from '/@/components/Icon';
  import createFlowTemplate from './createFlowTemplate.vue';
  import { useModal } from '/@/components/Modal';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useI18n } from '/@/hooks/web/useI18n';

  const { t } = useI18n();

  // 获取所有项目模板数据
  let flowList = ref([]);
  const searchWrokFlow: any = ref('');

  const pagination = {
    current: 1,
    pageSize: 5,
    onChange: (page: number, pageSize: number) => {
      pagination.current = page;
      pagination.pageSize = pageSize;
    },
  };

  const { createMessage } = useMessage();
  const { proxy }: any = getCurrentInstance();

  // 新建流程模板
  const handleCreated = () => {
    openCreateFlowTemplateModal(true, { isUpdate: false });
  };
  // 修改流程模板
  const handleEdit = (record: Recordable) => {
    openCreateFlowTemplateModal(true, { record, isUpdate: true });
  };
  // 删除流程模板
  const confirmWorkFlow = (record: Recordable) => {
    deleteFlowTemplate(record.id).then(() => {
      createMessage.success(t('common.delSuccessText'));
      GetAllFlow();
    });
  };
  // 流程静态图片
  const flowImage = ref(
    'https://picst.sunbangyan.cn/2023/11/01/ed867ef6cd7c675e8cb5ab06b9832f51.png',
  );

  async function GetAllFlow() {
    flowList.value = await newFlowListApi(searchWrokFlow.value);
  }
  GetAllFlow();
  // 添加属性弹窗
  const [registerCreateFlowTemplateModal, { openModal: openCreateFlowTemplateModal }] = useModal();
</script>
